<template>
  <div class="app-container">
    <info-page-container>
      <template slot="body">
        <el-empty v-if="chitInfo == null" description="暂无数据"></el-empty>
        <div v-else class="chit-info-body">
          <div class="txt-parent-con">
            <div class="txt-con">
              <el-scrollbar>
                <div class="info-model">
                  <el-alert
                      :closable="false"
                      type="warning">
                    <template slot="title">
                      <div class="alert-txt">
                        <div class="txt">
                          <i class="el-icon-warning"></i>
                          暂未上传空间数据
                        </div>
                        <div class="bt">
                          <i class="el-icon-upload2"></i>立即上传
                        </div>
                      </div>
                    </template>
                  </el-alert>
                </div>

                <div class="info-model">
                  <decorate :title="'保单信息'"></decorate>

                  <div class="label-value-con">
                    <div class="label">保险人姓名：</div>
                    <div class="value">{{ chitInfo.bdbt }}</div>
                  </div>

                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">保险单号码：</div>
                        <div class="value">{{ chitInfo.bxdhm }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">投保确认码：</div>
                        <div class="value">{{ chitInfo.tbqrm }}</div>
                      </div>
                    </div>
                  </div>

                  <div class="label-value-con">
                    <div class="label">保单条款：</div>
                    <div class="value">{{ chitInfo.bdtk }}</div>
                  </div>
                </div>

                <div class="info-model">
                  <decorate :title="'农户信息'"></decorate>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">投保人：</div>
                        <div class="value">{{ chitInfo.tbr }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">被保险人：</div>
                        <div class="value">{{ chitInfo.bbxr }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">证件类型：</div>
                        <div class="value">{{ chitInfo.zjlxName }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">证件号码：</div>
                        <div class="value">{{ chitInfo.zjhm }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">种植地点：</div>
                        <div class="value">{{ chitInfo.zzdd }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">投保组织者：</div>
                        <div class="value">{{ chitInfo.tbzzz }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">联系人：</div>
                        <div class="value">{{ chitInfo.lxr }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">联系电话：</div>
                        <div class="value">{{ chitInfo.lxdh }}</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="info-model">
                  <decorate :title="'其他信息'"></decorate>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">联/共保标志：</div>
                        <div class="value">{{ chitInfo.lgbbz }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">联/共保份额(%)：</div>
                        <div class="value">{{ chitInfo.lgbfe }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="label-value-con">
                    <div class="label">保费构成：</div>
                    <div class="value">{{ chitInfo.bfgc }}</div>
                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">保险生效日期：</div>
                        <div class="value">{{ chitInfo.bxks }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">保险失效日期：</div>
                        <div class="value">{{ chitInfo.bxjs }}</div>
                      </div>
                    </div>

                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">争议处理：</div>
                        <div class="value">{{ chitInfo.zycl }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">保险天数：</div>
                        <div class="value">{{ chitInfo.bxts == null ? 0 : chitInfo.bxts }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="label-value-con">
                    <div class="label">特别约定：</div>
                    <div class="value">{{ chitInfo.tbyd }}</div>
                  </div>
                </div>

                <div class="info-model">
                  <decorate :title="'承保公司信息'"></decorate>
                  <div class="label-value-con">
                    <div class="label">乙方公司名称：</div>
                    <div class="value">{{ chitInfo.yf }}</div>
                  </div>
                  <div class="label-value-con">
                    <div class="label">承保公司地址：</div>
                    <div class="value">{{ chitInfo.cbgsdz }}</div>
                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">联系电话：</div>
                        <div class="value">{{ chitInfo.cblxdh }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">邮政编码：</div>
                        <div class="value">{{ chitInfo.yzbb }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">服务电话：</div>
                        <div class="value">{{ chitInfo.fwdh }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">投诉专线：</div>
                        <div class="value">{{ chitInfo.tszx }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">核保：</div>
                        <div class="value">{{ chitInfo.hbr }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">提交人：</div>
                        <div class="value">{{ chitInfo.tjr }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">操作员：</div>
                        <div class="value">{{ chitInfo.czy }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">签订日期：</div>
                        <div class="value">{{ chitInfo.yfrq }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="label-value-con">
                    <div class="label">总公司地址：</div>
                    <div class="value">{{ chitInfo.zgsdz }}</div>
                  </div>
                  <div class="row-con">
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">邮编：</div>
                        <div class="value">{{ chitInfo.yb }}</div>
                      </div>
                    </div>
                    <div class="col-con">
                      <div class="label-value-con">
                        <div class="label">网址：</div>
                        <div class="value">{{ chitInfo.wz }}</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="info-model">
                  <decorate :title="'保单附件'"></decorate>
                  <div class="label-value-con">
                    <div class="label">保单原件：</div>
                  </div>
                  <show-file-list :show-close="false" :file-list="chitInfo.insuranceDetailFileVos"></show-file-list>

                  <div class="label-value-con">
                    <div class="label">保单原件：</div>
                  </div>
                  <show-file-list :show-close="false" :file-list="chitInfo.insuranceFileVos"></show-file-list>

                </div>

                <el-tabs v-model="activeName">
                  <el-tab-pane label="保险信息" name="insuranceInformation">
                    <value-table :read-only="true" :value-config="valueTableConfig"
                                 v-model="chitInfo.insuranceItems"></value-table>
                    <div class="num-row" v-if="chitInfo.zbxjeSz > 0">
                      <div class="label">总保险金额</div>
                      <div class="value">
                        <el-row>
                          <el-col :span="15"> {{ chitInfo.zbxjeHz }}</el-col>
                          <el-col :span="9">￥{{ chitInfo.zbxjeSz }}</el-col>
                        </el-row>
                      </div>
                    </div>
                    <div class="num-row" v-if="chitInfo.zbxfSz > 0">
                      <div class="label">总保险费</div>
                      <div class="value">
                        <el-row>
                          <el-col :span="15"> {{ chitInfo.zbxfHz }}</el-col>
                          <el-col :span="9">￥{{ chitInfo.zbxfSz }}</el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="保单明细" name="policyDetails">
                    <value-table @clickFun="clickFun" :dialog-form-label-width="`200px`"
                                 :dialog-width="`700px`"
                                 :value-config="valueTableDetailsConfig" :read-only="true"
                                 v-model="chitInfo.orderDetails"></value-table>
                  </el-tab-pane>
                </el-tabs>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </template>
      <template slot="footer">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleUpdate">修改保单</el-button>
      </template>
    </info-page-container>
  </div>
</template>

<script>
import {chitSubPageMixins} from "@/views/chit/mixins/chitSubPageMixins";
import BaseMap from "@/components/BaseMap/index.vue";
import {baseMapMixins} from "@/mixins/baseMapMixins";
import {pageBaseMapMixins} from "@/mixins/pageBaseMapMixins";
import testData from '@/data/testData.json'
import {CHIT_DETAIL_CONFIG, GEOMETRY_TYPE, INSURANCE_CONFIG} from "@/constantData";
import Decorate from "@/views/components/Decorate/index.vue";
import ShowFileList from "@/components/ShowFileList/index.vue";
import {isArr} from "@/utils/arrayUtil";
import ValueTable from "@/components/ValueTable/index.vue";

export default {
  name: "chitInfo",
  components: {
    Decorate,
    BaseMap,
    ValueTable,
    ShowFileList,
  },
  mixins: [chitSubPageMixins,],
  data() {
    return {
      btList: [
        {
          size: 'mini',
          icon: 'el-icon-upload2',
          label: '补录空间数据',
          funName: 'addGeoData'
        },
        {
          size: 'mini',
          icon: 'el-icon-search',
          label: '查看空间数据',
          funName: 'showPlot'
        },
      ],
      activeName: 'insuranceInformation',
      valueTableConfig: _.cloneDeep(INSURANCE_CONFIG),
      valueTableDetailsConfig: _.cloneDeep(CHIT_DETAIL_CONFIG),
    }
  },
  methods: {
    isArr,
    clickFun({funName}, data) {
      if (this[funName] && typeof this[funName] == 'function') {
        this[funName](data)
      }
    },
    handleUpdate() {
      let {chitId} = this
      this.$router.push({path: '/chit/chitInfoAdd', query: {chitId}})
    },
  }
}
</script>

<style scoped lang="scss">
.chit-info-body {
  height: 100%;
  width: 100%;

  ::v-deep .el-alert__content {
    width: 100%;
  }

  .alert-txt {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .txt{}
    .bt{
      cursor: pointer;
      color:  rgba(19, 194, 115, 1);
    }
  }

  .txt-parent-con {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .txt-con {
    height: 100%;
    width: 90%;
    overflow: hidden;

    .info-model {
      margin-bottom: 20px;
    }
  }
}
</style>
